<template>
  <xui-center-popup ref="popupRef">
    <view class="xui-modal">
      <text class="modal-body">{{ title }}</text>

      <view :class="['modal-footer', { 'onlyone': !cancelText || !confirmText }]">
        <button class="button cancel" @click="onCancel">{{ cancelText }}</button>
        <button class="button confirm" @click="onConfirm">{{ confirmText }}</button>
      </view>
    </view>
  </xui-center-popup>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'XuiModal',
  props: {
    title: String,
    cancelText: String,
    confirmText: String
  },
  emits: ['cancel', 'confirm'],
  setup (_, { emit }) {
    const popupRef = ref()
    const open = () => popupRef.value.open()
    const close = () => popupRef.value.close()

    const onCancel = () => {
      emit('cancel')
    }
    const onConfirm = () => {
      emit('confirm')
    }

    return {
      popupRef,
      open,
      close,

      onCancel,
      onConfirm
    }
  }
}
</script>

<style lang="scss">
.xui-modal {
  width: 500rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  text-align: center;

  .modal-body {
    flex: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #333333;
    line-height: 42rpx;
  }

  .modal-footer {
    display: flex;
    position: relative;

    &::before {
      content: "";
      height: 1px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: #eaeaea;
    }

    &::after {
      content: "";
      width: 1px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      background: #eaeaea;
    }

    &.onlyone::after {
      content: none;
    }

    .button {
      width: 50%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #333333;
    }

    .cancel {
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>
